<template>
        <ul class="list">
            <li class="item" 
            v-for="item in letters" 
            :key="item"
            :ref="item"
            @click="letterClick"
            @touchStar="handtouchStart"
            @touchMove="handtouchMove"
            @touchEnd="handtouchEnd"
            >
             {{item}}
            </li>
        </ul>
</template>

<script>
export default {
    name : 'cityalphabet',
    data () {
        return {
            touchStatus: false,
            startY: 0,
    }
  },
    props :{
        cities : Object
    },
    computed:{
        letters () {
        const letters = []
        for (let i in this.cities) {
            letters.push(i)
      }
      return letters
    }
    },
    methods:{
        letterClick(e){
            this.$emit('change',e.target.innerText)
            console.log(e.target.innerText)
            //触发change事件，并传递一个值作为参数
            //向父组件传点击的字母，父组件接收后再传递给兄弟组件
            },
        handtouchStart () {
            this.touchStatus = true
        },
        handtouchMove () {
            if (this.touchStatus) {
                const startY = this.$refs['A'][0].offsetTop
                const touchY = (e.touches[0].clientY - 79)
                const index = Math.floor((touchY-startY)/20)
                if(index >=0 && index < this.letters.length){
                    this.$emit('change',this.letters[index])
                } 
      }
        },
        handtouchEnd (){
            this.touchStatus = false
        },
    }
}
</script>

<style lang="stylus" scoped>
ul,li{ padding:0;margin:0;list-style:none}
    .list 
        display flex
        flex-direction column
        justify-content center
        position absolute
        top 6rem
        right 0
        bottom 2rem
        width 1.6rem
        .item
            text-align center
            line-height 1.4rem
            font-size 12px
            color #00bcd4
        
      

</style>